<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.prime.com.tr/ui" template="/layout/principal.xhtml">

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">
            <h:outputText value="Listado de Formularios" />
        </h1>

        <h:form>
            <p:growl id="growl" showDetail="true" life="3000" />

            <p:panel header="Filtro">
                <h:panelGrid columns="2">
                    <h:outputLabel value="Estado : " for="estadoId" />
                    <p:selectOneMenu id="estadoId" value="#{form.estado}" style="width: 200px;">
                        <f:selectItem itemLabel="Todos" itemValue="" />
                        <f:selectItem itemLabel="Activa" itemValue="A" />
                        <f:selectItem itemLabel="Inactiva" itemValue="I" />
                        <p:ajax update="dttForm" listener="#{form.actualizarLista}" />
                    </p:selectOneMenu>
                </h:panelGrid>
            </p:panel>

            <p:dataTable id="dttForm" var="f" value="#{form.listForm}" selection="#{form.selectedForm}" paginator="true"
                rows="10">
                <p:column selectionMode="single" />
                <p:column headerText="Nombre">
                    <h:outputText value="#{f.nombre}" />
                </p:column>
                <p:column headerText="Descripcion">
                    <h:outputText value="#{f.descripcion}" />
                </p:column>
                <p:column headerText="Estado">
                    <h:outputText value="#{f.estatus}" />
                </p:column>
            </p:dataTable>

            <p:panel header="Opciones">
                <h:panelGrid columns="6">
                    <p:commandButton value="Nuevo" action="goCrearFormulario" actionListener="#{form.clear}"
                        style="width: 200px;" ajax="false" />
                    <p:commandButton value="Editar" action="goModificarFormulario" actionListener="#{form.load}"
                        style="width: 200px;" ajax="false" />
                    <p:commandButton value="Activar" action="#{form.activar}" style="width: 200px;" />
                    <p:commandButton value="Desactivar" action="#{form.desactivar}" style="width: 200px;" />
                    <p:commandButton value="Vista Previa" action="#{form.view}" style="width: 200px;" />
                    <p:commandButton value="Eliminar" action="#{form.eliminar}" style="width: 200px;" />
                </h:panelGrid>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>